<template>
  <el-dialog
    :close-on-click-modal="false"
    destroy-on-close
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="止盈" prop="stop_profit_price">
          <el-input type="number" @blur="zhiying('fall')" :max="form.openpriceavg" min="0" @input="changeO('stop_profit_price')" v-if="form.risefall == 'fall'" v-model="form.stop_profit_price" :step="form.unit"/>
          <el-input type="number" @blur="zhiying('rise')" :min="form.openpriceavg" @input="changeO('stop_profit_price')" v-if="form.risefall == 'rise'" v-model="form.stop_profit_price" :step="form.unit"/>
      </el-form-item>

      <el-form-item
        label="止损"
        prop="stop_loss_price"
      >
       <el-input type="number" @blur="zhisun('rise')"  @input="changeO('stop_loss_price')" v-model="form.stop_loss_price" :step="form.unit" v-if="form.risefall == 'rise'"/>
       <el-input type="number" @blur="zhisun('fall')" @input="changeO('stop_loss_price')"   v-else v-model="form.stop_loss_price" :step="form.unit"/>
      </el-form-item>

      <el-form-item
        label="设置止盈止损手数"
        prop="volume"
        label-width="200"
      >
        <el-input type="number" style="width:325px;" :min="1" :max="maxvolume" v-model="form.zyvolume" @blur="checknum"/>
      </el-form-item>


      <el-form-item label="是否启动" prop="onoff">
         <el-switch v-model="form.onoff" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item label="有效期" prop="daystatus">
         <el-select size="mini"  class="select" v-model="form.daystatus"  placeholder="有效期">
            <el-option
              label="当日有效"
              :value="'0'">
            </el-option>
            <el-option
              label="永久有效"
              :value="'1'">
            </el-option>
          </el-select>
      </el-form-item>

      
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button @loading="loading" type="primary" @click="save">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    components: {
    },
    data() {
      return {
        loading: false,
        maxvolume: 1,
        openpriceavg: '',
        stop_loss_price: 0,
        stop_profit_price: 0,
        form: {
          id: '',
          symbol_id: '',
          rise_fall: '',
          stop_loss_price: '',
          stop_profit_price: '',
          onoff: true,
          daystatus: '0',
          zyvolume: 1,
        },
        rules: {
          // stop_loss_price: [{ required: true, trigger: 'blur', message: '请输入止损' }],
          // stop_profit_price: [
          //   { required: true, trigger: 'blur', message: '请输入止盈' }
          // ],
          // volume: [{ required: true, trigger: 'blur', message: '请输入手数' }]
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      zhisun(type) {
        if (type == 'rise') {
            if (this.form.stop_loss_price < 0) {
              this.$message({
                type: 'error',
                message: '超出止损设置范围'
              })
              this.form.stop_loss_price = 0
            }
        } else {
          if (this.form.stop_loss_price < this.form.openpriceavg) {
              this.$message({
                type: 'error',
                message: '超出止损设置范围'
              })
              this.form.stop_loss_price = this.form.openpriceavg
            }
            
        }
      },
      zhiying(type) {
        
        if (type == 'rise') {
            if (this.form.stop_profit_price < this.form.openpriceavg) {
              this.$message({
                type: 'error',
                message: '超出止盈设置范围'
              })
              this.form.stop_profit_price = this.form.openpriceavg
            }
        } else {
            if (this.form.stop_profit_price > this.form.openpriceavg) {
              this.$message({
                type: 'error',
                message: '超出止盈设置范围'
              })
              this.form.stop_profit_price = this.form.openpriceavg
            }
        }
      },
      checknum() {
        if (this.form.zyvolume > this.maxvolume) {
          this.form.zyvolume = this.maxvolume
          this.$message({
            type: 'error',
            message: `最大设置${this.maxvolume}手`
          })
        }
      },
      changeO(type) {
        if (this[type] == 0) {
            this[type] = this.openpriceavg
            this.form[type] = this.openpriceavg
        }
      },
      showEdit(row) {
        this.title = '设置止盈止损'
        row.rise_fall = row.risefall
        this.openpriceavg = row.openpriceavg
        row.stop_profit_price = !Number(row.stop_profit_price) ?0 :row.stop_profit_price
        row.stop_loss_price = !Number(row.stop_loss_price)?0:row.stop_loss_price
        row.daystatus = String(row.daystatus)
        row.zyvolume = Number(row.zyvolume) || 1
        this.maxvolume = Number(row.volume)
        this.form = Object.assign(this.form, row)
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.stop_loss_price = 0
        this.stop_profit_price = 0
        this.dialogFormVisible = false
      },
      save() {
        let that = this
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.form.symbol_id = this.form.contract
              this.loading = true
              if (!this.form.id) {
                that.$post('/order/setprofitloss', this.form).then(res => {
                  if (res.code == 1) {
                    that.$notify.success(res.msg);
                    this.loading = false
                    this.close()
                    this.$emit('fetch-data')
                  } else {
                    this.loading = false
                    that.$notify.error(res.msg);
                  }
                });
              } else {
                 that.$post('/order/editzyzx', this.form).then(res => {
                  if (res.code == 1) {
                    that.$notify.success(res.msg);
                    this.loading = false
                    this.close()
                    this.$emit('fetch-data')
                  } else {
                    this.loading = false
                    that.$notify.error(res.msg);
                  }
                });
              }
              
          } else {
            return false
          }
        })
      },
    },
  }
</script>
